<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes"/>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>签字确认</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
        }

        #app {
            text-align: center;
        }

        .control {
            text-align: center;
        }
        #myCanvas{
            margin-top: -1px;
        }
    </style>
</head>
<body>

<div id="app">
    <div align="center">
        <canvas id="myCanvas" height="0" width="0" style="border:1px solid #6699cc;"></canvas>
    </div>

    <el-form ref="form" style="width: 100%">
        <el-form-item>
            <el-button type="primary" style="width: 90%;" @click="clearArea">重写</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width: 90%" @click="saveImageInfo">确认</el-button>
        </el-form-item>
    </el-form>

</div>


</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            mousePressed: false,
            lastX: 0,
            lastY: 0,
            ctx: null,
            c: null,
            control: null,
        },
        methods: {
            saveImageInfo() {
                let image = this.c.toDataURL("image/png");
                console.log(image)
            },
            InitThis() {
                let _this = this;
                this.c.addEventListener('touchstart', function (event) {
                    console.log(event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY);
                    if (event.targetTouches.length == 1) {
                        event.preventDefault();// 阻止浏览器默认事件，重要
                        var touch = event.targetTouches[0];
                        _this.mousePressed = true;
                        _this.Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
                    }
                }, false);
                this.c.addEventListener('touchmove', function (event) {
                    console.log(event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY);
                    console.log(this.offsetLeft)
                    if (event.targetTouches.length == 1) {
                        event.preventDefault();// 阻止浏览器默认事件，重要
                        var touch = event.targetTouches[0];
                        if (_this.mousePressed) {
                            console.log(this.offsetTop)
                            _this.Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
                        }
                    }
                }, false);
                this.c.addEventListener('touchend', function (event) {
                    console.log(event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY);
                    if (event.targetTouches.length == 1) {
                        event.preventDefault();// 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
                        _this.mousePressed = false;
                    }
                }, false);

                this.c.onmousedown = function (event) {
                    _this.mousePressed = true;
                    _this.Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);

                };

                this.c.onmousemove = function (event) {
                    if (_this.mousePressed) {
                        _this.Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);

                    }
                };
                this.c.onmouseup = function (event) {
                    _this.mousePressed = false;
                };
            },
            Draw(x, y, isDown) {
                if (isDown) {
                    this.ctx.beginPath();
                    this.ctx.strokeStyle = "#000";
                    this.ctx.lineWidth = 4;
                    this.ctx.lineJoin = "round";
                    this.ctx.moveTo(this.lastX, this.lastY);
                    this.ctx.lineTo(x, y);
                    this.ctx.closePath();
                    this.ctx.stroke();
                }
                this.lastX = x;
                this.lastY = y;
            },
            clearArea() {
                this.ctx.setTransform(1, 0, 0, 1, 0, 0);
                this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            }
        },
        mounted() {
            let _this = this;
            this.ctx = document.getElementById('myCanvas').getContext("2d");
            this.ctx.canvas.width = window.innerWidth - 4;
            this.ctx.canvas.height = window.innerHeight - 140;
            this.c = document.getElementById("myCanvas");
            this.control = document.getElementsByClassName("control")[0];
            this.InitThis();
            window.onresize = function () {
                _this.ctx.canvas.width = window.innerWidth - 4;
                _this.ctx.canvas.height = window.innerHeight - 140;
            }
        }
    });

</script>

</html>